{extend name="common/base" /}
{block name="body"} 
<style>
    .slect_dropdown_box{
        height: 300px;
        overflow-y: auto;
    }
</style>
<main>

    <div class="container layui-row ">
        <div class="layui-col-md3 layui-col-xs12 personal-nav">
            <div class="personal-user-name">
                <h1>Welcome Back,<br>Klay!</h1>
                <p class="white-font">15874587454@qq.com</p>
            </div>

            <div class="personal-nav-item">
                <p class="white-font font-size-small">PURCHASE HISTORY</p>
                <div class="unselect-button">
                    <a href="/personal-info-all-purchases.html#block">
                        <span>View All Purchases</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>

                </div>
            </div>
            <div class="personal-nav-item">
                <p class="white-font font-size-small">PROFILE</p>
                <div class="select-button">
                    <a href="/personal-my-sizes.html">
                        <span>My Sizes</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="/personal-info.html">
                        <span>Personal Info</span>
                        <img src="__ROOT__/static/images/go-white.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="/personal-payments.html#block">
                        <span>Payments</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="/personal-address-and-delivery.html#block">
                        <span>Address and Delivery</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
            </div>
            <div class="personal-nav-item">
                <p class="white-font font-size-small">SECURITY AND COMMUNICATION</p>
                <div class="unselect-button">
                    <a href="/personal-change-password.html#block">
                        <span>Change Password</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="/personal-subsc-riptions.html#block">
                        <span>Subsc riptions</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>

                <div class="unselect-button margin-top-sign-out">
                    <a href="/login_out.html">
                        <span>Sign Out</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-col-md9 layui-col-xs12 personal-genter" id="block">
            <h1 class="personal-genter-title">My Sizes</h1>
            <ul class="layui-row layui-col-space30">
                <li class="layui-col-md12 layui-col-xs12">
                    <label class="personal-label" for="First Name">size of bra</label>
                    <div class=" input-style slect_dropdown" lay-options="{
                          data: {$size}
                        }">
                        <div id="bra_size" class="data-value">{$user_info.bra_size|default='34A'}</div>
                    </div>
           
                </li>
                <li class="layui-col-md12 layui-col-xs12">
                    <label class="personal-label" for="First Name">size of panties</label>
                    <div class=" input-style slect_dropdown" lay-options="{
                          data: [{title: 'S', id: 1}, {title: 'M', id: 2}, {title: 'L', id: 3}, {title: 'XL', id: 4}, {title: 'XXL', id: 5}]
                        }">
                        <div id="panties_size" class="data-value">{$user_info.panties_size|default='L'}</div>
                    </div>
                </li>
                <!--<li class="layui-col-md12 layui-col-xs12">-->
                <!--    <div class="layui-form my-sizes-check-box">-->
                <!--        <input class="checkbox-style" type="checkbox" name="S" title="S">-->
                <!--        <input class="checkbox-style" type="checkbox" name="M" title="M">-->
                <!--        <input class="checkbox-style" type="checkbox" name="L" title="L">-->
                <!--        <input class="checkbox-style" type="checkbox" name="XL" title="XL">-->
                <!--        <input class="checkbox-style" type="checkbox" name="XXL" title="XXL">-->
                <!--    </div>-->
                <!--</li>-->
                <li class="layui-col-md12 layui-col-xs12 flex-end">

                    <div class="submit-button" id="save_update">Save Update</div>
                </li>
            </ul>
        </div>
    </div>
</main>
{/block}

{block name="js"} 
<script>
    $(function () {
        // Initialize Layui date picker
        var dropdown = layui.dropdown;
        dropdown.render({
            elem: '.slect_dropdown',
            className: 'slect_dropdown_box',
            click: function (data, othis) {

                this.elem.find('.data-value').text(data.title); // 当前组件绑定的目标元素对象，批量绑定中常用

            }
        });

        // Register button click event
        $('#save_update').on('click', function () {
            const bra_size = $('#bra_size').text().trim();
            const panties_size = $('#panties_size').text().trim();

            if (!bra_size ) {
                return layui.layer.msg('braSize is Required', {icon: 2});
            }
            if (!panties_size) {
                return layui.layer.msg('panties_size Is Required', {icon: 2});
            }


            // Submit form
            const data = {
                bra_size: bra_size,
                panties_size: panties_size,
            };
            
            ajaxRequest('/personal-my-sizes', data, 'POST', this, function (response) {
                layer.msg('UPDATE SUCCESS', {icon: 1, time: 2000}, function() {
                    // 弹窗消失后跳转
                    window.location.href = '/personal-my-sizes'; // 替换为目标页面的 URL
                });
            });
        });


    });
</script>
{/block}
